<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>燕雀导航 - 做个干净好用的手机导航</title>
    <link rel="icon" href="./img/navigation.png">
    <link rel="manifest" href="./manifest.json">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="app">
        <div class="header">
            <div class="search">
                <input class="search-input" type="text" v-model="keywords" placeholder="关键词">
                <div class="search-btns">
                    <button class="search-btn" @click="search(enginUrl)" v-for="(enginUrl,name) in searchEngines" :key="name">{{name}}</button>
                </div>
            </div>
            <ul class="category-head">
                <li v-for="category in bookmarks" :class="{'on':active==category.category}"
                    @click="active=category.category"  v-cloak>{{category.category}}</li>
            </ul>
        </div>
        <div class="main">
            <ul v-for="category in bookmarks" v-show="active==category.category">
                <li  v-cloak>
                    <section class="section" v-for="group in category.groups">
                        <h3><span>{{group.groupName}}</span></h3>
                        <ul>
                            <li v-for="item in group.list">
                                <a :href="item.href">{{item.name}}</a>
                            </li>
                        </ul>
                    </section>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <p>本页支持离线访问，所有数据存储在本地（清空缓存会清除数据）- <a href="https://gitee.com/niefy/h5-nav">源码地址</a></p>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/data.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            keywords: '',
            bookmarks: [],
            active: '',
            searchEngines: SEARCH_ENGINES
        },
        mounted() {
            this.bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || DEFAULT_BOOKMARKS;
            this.active = this.bookmarks[0].category;
        },
        methods: {
            search(enginUrl) {
                window.location.href = enginUrl.replace('%s', this.keywords);
            }
        }
    });

    if ('serviceWorker' in navigator) {//注册service worker便于离线访问
        navigator.serviceWorker.register('/h5-nav/sw.js').then(function (reg) {
            console.log('Registration succeeded. Scope is ' + reg.scope);
        }).catch(function (error) {
            console.log('Registration failed with ' + error);
        });
    }
</script>

</html>